<template>
  <section class="login-container">
    <section class="login-top">
      <div class="top-center">
        <img src="../../assets/images/login-logo.png" alt class="login-logo">
        <span class="login-title">DUM系统</span>
      </div>
    </section>
    <section class="login-center">
      <div class="login-main">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" label-position="left">
          <div class="title">DUM系统登录</div>
          <el-form-item prop="account" :class="{'choiceActive': focusStatus.account}">
            <img v-show="!focusStatus.account" src="../../assets/images/account-normal.png" alt class="left-img">
            <img v-show="focusStatus.account" src="../../assets/images/account-select.png" alt class="left-img">
            <el-input v-model="loginForm.account" name="loginName" type="text" placeholder="账号" @focus="focusStatus.account=true" @blur="focusStatus.account=false" />
          </el-form-item>
          <el-form-item prop="sms_code" class="vertify-code">
            <el-input v-model="loginForm.sms_code" name="sms_code" type="text" placeholder="请输入手机验证码" />
            <span v-show="!time" class="code-text" @click="getVertifyCode">获取验证码</span>
            <span v-show="time" class="code-text code-get-text">{{ time }}秒后重新获取</span>
          </el-form-item>
          <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">登录</el-button>
        </el-form>
      </div>
    </section>
    <footer class="login-foot" />
  </section>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { getSms, login, getInfo } from '@/api/user'
import { encrypt } from '@/utils/auth'
export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请输入账户'))
      } else {
        if (value.length === 11) {
          callback()
        } else {
          callback(new Error('请填写手机号'))
        }
      }
    }
    const smsCode = (rule, value, callback) => {
      if (value.length !== 6) {
        callback(new Error('短信验证码为6位'))
      } else {
        callback()
      }
    }
    return {
      focusStatus: {
        account: false
      },
      loginForm: {
        account: '',
        sms_code: ''
      },
      loginRules: {
        // 登录校验格式
        account: [{ required: true, trigger: 'blur', validator: validateUsername }],
        sms_code: [{ required: true, trigger: 'blur', validator: smsCode }]
      },
      loading: false,
      redirect: undefined,
      otherQuery: {},
      time: 0,
      timer: null
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    // 登录
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          login(this.loginForm).then(response => {
            // 这里做个判断，如果信息只有一个，那么就直接去获取权限，否则就储存角色信息，跳转到选择角色页面
            const roles = response.data
            sessionStorage.setItem('roles', encrypt(JSON.stringify(roles)))
            if (roles.length > 1) {
              this.$store.dispatch('user/storeRoles', roles).then(res => {
                this.loading = false
                this.$router.push({ path: '/role' })
              }).catch(() => {
                this.loading = false
              })
            } else {
              this.$store.dispatch('user/setRole', roles[0]).then(res => {
                this.loading = false
                this.$router.push({ path: '/' })
              }).catch(() => {
                this.loading = false
              })
            }
          })
        }
      })
    },

    // 点击获取验证码
    getVertifyCode() {
      const myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/
      if (!myreg.test(this.loginForm.account)) {
        this.$message({
          message: '请填写手机号',
          type: 'error',
          duration: 3000
        })
        return
      }
      getSms(this.loginForm.account).then(res => {
        this.time = 300
        this.timer = setInterval(this.countDown, 1000)
      })
    },

    // 获取验证码倒计时处理
    countDown() {
      if (this.time <= 0) {
        clearInterval(this.timer)
      } else {
        this.time--
      }
    },

    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #000000;
$cursor: #939699;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 36px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      height: 30px;
      color: #313233;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px #fff inset !important;
        -webkit-text-fill-color: #313233 !important;
      }
    }
  }

  .el-form-item {
    width: 260px;
    height: 36px;
    border-radius: 5px;
    background: #ffffff;
    border: 1px solid #d3d7db;
    color: #454545;
    margin-bottom: 20px !important;
    &:hover {
      border: 1px solid #3399ff;
    }
  }
  .choiceActive {
    border: 1px solid #3399ff;
  }
  .login-yzm {
    position: relative;
    .el-form-item {
      width: 146px;
      float: left;
      margin-bottom: 32px;
    }
    .captcha {
      position: absolute;
      right: 0;
      .captcha-img {
        cursor: pointer;
        border-radius: 4px;
        width: 98px;
        height: 38px;
      }
    }
    .el-input {
      width: 100px;
    }
  }
}
</style>
<style lang="scss" scoped>
$light_gray: #fff;
.login-container {
  width: 100%;
  height: 100%;
  background: #ffffff;
  .login-top {
    width: 100%;
    height: 80px;
    position: relative;
    .top-center {
      position: absolute;
      width: 1200px;
      height: 80px;
      left: 50%;
      margin-left: -600px;
      line-height: 80px;
      .login-logo {
        width: 44px;
        height: 44px;
        vertical-align: middle;
      }
      .login-title {
        vertical-align: middle;
        font-size: 24px;
        color: #313233;
        margin-left: 16px;
        font-weight: 500;
      }
      .login-common-text {
        vertical-align: middle;
        display: inline-block;
        text-align: center;
        margin-left: 16px;
        height: 22px;
        line-height: 20px;
        font-size: 16px;
        border-radius: 4px;
      }
      .login-edutext {
        width: 80px;
        color: #3399ff;
        border: 1px solid #3399ff;
        background: #e6f2ff;
      }
      .login-schtext {
        width: 64px;
        color: #4dcd70;
        border: 1px solid #4dcd70;
        background: #def6e4;
      }
    }
  }
  .login-center {
    width: 100%;
    height: 560px;
    background: url("../../assets/images/login-bg.png") no-repeat center;
    position: relative;
    .login-main {
      position: absolute;
      width: 1200px;
      left: 50%;
      margin-left: -600px;
      height: 100%;
    }
    .login-form {
      position: absolute;
      right: 0;
      top: 88px;
      max-width: 100%;
      padding: 0 32px 30px 32px;
      background: $light_gray;
      border-radius: 4px;
      .title {
        padding: 40px 0 32px 0;
        font-size: 20px;
        color: #3399ff;
      }
      .left-img {
        width: 14px;
        margin-left: 14px;
        vertical-align: middle;
        position: relative;
        top: -1px;
      }
      .login-wjma {
        text-align: right;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: #626466;
        .text {
          cursor: pointer;
        }
      }
      .vertify-code {
        .el-input {
          width: 60%;
        }
        .code-text {
          position: absolute;
          right: 8px;
          cursor: pointer;
          text-align: right;
          font-size: 14px;
          color: #3399ff;
        }
        .code-get-text {
          color: #939699;
        }
      }
    }
  }
  .login-edu {
    background: url("../../assets/images/loginedu-bg.jpg") no-repeat center;
  }
  .login-sch {
    background: url("../../assets/images/loginsch-bg.jpg") no-repeat center;
  }
  .login-foot {
    margin-top: 32px;
    font-size: 12px;
    color: #939699;
    text-align: center;
    letter-spacing: 1px;
  }
}
</style>
